<template>
  <el-form :inline="true" ref="ruleForm" :model="formInline" class="demo-form-inline">
    <el-form-item label="结算月份">
        <el-form-item prop="startMonth">
          <el-date-picker
            v-model="formInline.startMonth"
            unlink-panels
            type="month"
            align="right"
            value-format="yyyy-MM">
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="endMonth" label="至">
          <el-date-picker
            v-model="formInline.endMonth"
            unlink-panels
            type="month"
            align="right"
            value-format="yyyy-MM">
          </el-date-picker>
        </el-form-item>
    </el-form-item>
    <el-form-item label="实际合计发放">
      <el-col :span="11">
        <el-form-item prop="minAmount">
          <el-input  @keyup.enter.native="handleFilter" v-model="formInline.minAmount" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-form-item prop="maxAmount">
          <el-input  @keyup.enter.native="handleFilter" v-model="formInline.maxAmount" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item class="with-pre-select" prop="keywords">
      <el-input  @keyup.enter.native="handleFilter" placeholder="请输入关键词" v-model="formInline.keywords" class="input-with-select">
        <el-select v-model="formInline.searchType" slot="prepend" placeholder="请选择查询范围">
          <el-option label="账号名" :value="1"></el-option>
          <el-option label="姓名" :value="2"></el-option>
        </el-select>
      </el-input>
    </el-form-item>
    <el-form-item label="手续费方案" prop="feeRule">
      <el-select v-model="formInline.feeRule" placeholder="请选择手续费方案">
        <el-option
          v-for="item in commSeleList"
          :label="item.name"
          :key="item.id"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="佣金方案类型" prop="commMode">
      <el-select v-model="formInline.commMode" placeholder="请选择佣金方案类型">
        <el-option
          v-for="item in agencyEnum.COMMISSION_TYPE"
          :label="item.title"
          :key="item.value"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="会员返佣方案" prop="cashRule">
      <el-select v-model="formInline.cashRule" placeholder="请选择会员返佣方案">
        <el-option
          v-for="item in commCaseSeleList"
          :label="item.name"
          :key="item.id"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="审核状态" prop="status">
      <el-select v-model="formInline.status" placeholder="请选择状态">
        <el-option
          v-for="item in statusList"
          :label="item.title"
          :key="item.value"
          :value="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="审核人" prop="operator">
      <el-select v-model="formInline.operator" placeholder="请选择审核人">
        <el-option
          v-for="item in auditList"
          :label="item"
          :key="item"
          :value="item"
        ></el-option>
      </el-select>
    </el-form-item>

    <el-button class="filter-item" type="primary" :loading="loading" icon="el-icon-search" @click="handleFilter">搜索
    </el-button>
    <el-button @click="selfResetForm('ruleForm')">重置</el-button>
  </el-form>

</template>

<script>

// services
import { getCommissionList } from '@/services/api/commission';
import { getAuditManList } from '@/services/api/audit';

// mixins
import { form, pickerOption } from '@/build';

export default {
  name: 'settlement-log-filter',
  mixins: [form, pickerOption],
  props: {
    commSeleList: {
      type: Array,
      required: true,
      default: () => [],
    },
    commCaseSeleList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      modelList: [],
      auditList: [],

      formInline: {
        startMonth: moment().subtract(1, 'months').format('YYYY-MM'),
        endMonth: moment().format('YYYY-MM'),
        status: '',
        feeRule: -1,
        commMode: -1,
        cashRule: -1,
      },
      statusList: [
        { title: '全部', value: '' },
        { title: '初审通过', value: 1 },
        { title: '终审通过', value: 3 },
        { title: '未审核', value: 0 },
        { title: '已拒绝', value: '2,4' },
      ],
    };
  },
  methods: {
    handleFilter() {
      this.$emit('on-filter', this.formInline);
    },
    selfResetForm(formName) {
      this.resetForm(formName);
      this.handleFilter();
    },
  },
  mounted() {
    this.bindGet(getCommissionList, 'modelList');
    this.bindGet(getAuditManList, 'auditList', {
      format: (data) => {
        if (!data.length) return [];
        return data.filter(item => !!item);
      },
    });
    this.getAll();
  },
};
</script>

<style lang="scss" scoped>
  .with-pre-select {
    .el-input-group__prepend {
      .el-select {
        width: 160px;
      }
    }
  }

  .money-range {
    .el-input {
      width: 100px;
    }
  }

</style>
